<div id="<?php echo $uniqid;?>" class="agentGoodsLog" style="padding: 0;">
    <table border="0" cellspacing="1" cellpadding="5" class="formtable" style="margin-bottom: 100px;">
        <tr bgcolor="#FFFFFF">
            <td colspan="2" style="text-align: left">
                <div style="padding: 10px 40px;">
                    <div class="display-flex" style="margin-bottom:10px">
                        <div class="goods-image" v-if="dataset.goods.image">
                            <el-image :src="dataset.goods.image" fit="container">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                        </div>
                        <div class="goods-title">
                            <p>
                                商品名称：{{dataset.goods.title}}<br>
                                商品ID：{{dataset.goods.id}}；商品价格：￥{{dataset.goods.price}}
                            </p>
                            <p>商品状态：<span style="color: #097fad">{{dataset.goods.status==='up'?'上架':'下架'}}</span></p>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td style="text-align: left; max-width: 200px; width: 200px">
                <b>产品参与分红</b>
            </td>
            <td>
                <div class="display-flex">
                    <div>是否参与：</div>
                    <div>{{dataset.status?'参与':'不参与'}}</div>
                </div>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF" v-if="dataset.status==1">
            <td><b>代理分红设置</b></td>
            <td>
                <div class="display-flex">
                    <div>是否参与：</div>
                    <div>{{dataset.jc_status?'参与':'不参与'}}</div>
                </div>
                <div class="display-flex" v-if="dataset.jc_status==1">
                    <div>分红规则：</div>
                    <div>{{dataset.jc_self_rules?'独立规则':'默认规则'}}</div>
                </div>
                <div style="padding: 10px 0;" v-if="dataset.jc_status==1">
                    <div v-if="dataset.jc_self_rules==1" style="overflow: auto;">
                        <div class="display-flex commission-header-container">
                            <div class="commission-store-name">代理身份名称</div>
                            <div class="commission-item-log">
                                分红比例
                            </div>
                        </div>
                        <div class="alone-setting-container">
                            <div class="display-flex">
                                <div>
                                    <!-- 身份 -->
                                    <div class="commission-store-name" style="height: 50px; line-height: 50px;" v-for="(levelItem,level) in levelList">
                                        {{levelItem.name}}
                                    </div>
                                </div>
                                <div>
                                    <div v-for="(commissionitem,index1) in dataset.jc_rules">
                                        <div class="display-flex commission-item-log">
                                            <div class="sku-price-ratio" v-if="commissionitem.ratio != ''">
                                                {{commissionitem.ratio}}%
                                            </div>
                                            <div class="sku-price-money" v-else-if="commissionitem.money != ''">
                                                {{commissionitem.money}}元
                                            </div>
                                            <div class="sku-price-money" v-else>
                                                --
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div style="overflow: auto;" v-else>
                        <div class="display-flex goods-header commission-header-container">
                            <div class="commission-store-name">代理身份名称</div>
                            <div class="commission-item-log">分红比例</div>
                        </div>
                        <div class="display-flex goods-body-item commission-body-container"
                             v-for="levelItem in levelList">
                            <div class="commission-store-name">
                                {{levelItem.name}}
                            </div>
                            <div class="commission-item-log">
                                {{levelItem.commission_rules}}%
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF" v-if="dataset.status==1">
            <td><b>平级分红设置</b></td>
            <td>
                <div class="display-flex">
                    <div>是否参与：</div>
                    <div>{{dataset.pj_status?'参与':'不参与'}}</div>
                </div>
                <div class="display-flex" v-if="dataset.pj_status==1">
                    <div>分红规则：</div>
                    <div>{{dataset.pj_self_rules?'独立规则':'默认规则'}}</div>
                </div>
                <div style="padding: 10px 0;" v-if="dataset.pj_status==1">
                    <div v-if="dataset.pj_self_rules==0">
                        <div class="display-flex goods-header commission-header-container">
                            <div class="commission-store-name">代理身份名称</div>
                            <div class="commission-item-log">平一分红比例</div>
                            <div class="commission-item-log">平二分红比例</div>
                        </div>
                        <div class="display-flex goods-body-item commission-body-container" v-for="levelItem in levelList">
                            <div class="commission-store-name">
                                {{levelItem.name}}
                            </div>
                            <div class="commission-item-log">
                                    <span v-if="levelItem.award_ping1">
                                        <span v-if="levelItem.award_ping1.money">金额：￥{{levelItem.award_ping1.money}}</span>
                                        <span v-if="levelItem.award_ping1.ratio">比例 ：{{levelItem.award_ping1.ratio}}%</span>
                                    </span>
                                <span v-else>&nbsp;</span>
                            </div>
                            <div class="commission-item-log">
                                    <span v-if="levelItem.award_ping2">
                                        <span v-if="levelItem.award_ping2.money">金额：￥{{levelItem.award_ping2.money}}</span>
                                        <span v-if="levelItem.award_ping2.ratio">比例 ：{{levelItem.award_ping2.ratio}}%</span>
                                    </span>
                                <span v-else>&nbsp;</span>
                            </div>
                        </div>
                    </div>
                    <div v-if="dataset.pj_self_rules==1">
                        <div class="display-flex goods-header commission-header-container">
                            <div class="commission-store-name">代理身份名称</div>
                            <div class="commission-item-log">平一分红比例</div>
                            <div class="commission-item-log">平二分红比例</div>
                        </div>
                        <div class="alone-setting-container">
                            <div>
                                <div class="display-flex">
                                    <div>
                                        <!-- 身份 -->
                                        <div class="commission-store-name" style="height: 50px; line-height: 50px;" v-for="(levelItem,level) in levelList">
                                            {{levelItem.name}}
                                        </div>
                                    </div>
                                    <div>
                                        <div v-for="(commissionitem,index1) in dataset.pj_level1_rules">
                                            <div class="display-flex commission-item-log">
                                                <div class="sku-price-ratio" v-if="commissionitem.ratio != ''">
                                                    {{commissionitem.ratio}}%
                                                </div>
                                                <div class="sku-price-money" v-else-if="commissionitem.money != ''">
                                                    {{commissionitem.money}}元
                                                </div>
                                                <div class="sku-price-money" v-else>
                                                    --
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div>
                                        <div v-for="(commissionitem,index1) in dataset.pj_level2_rules">
                                            <div class="display-flex commission-item-log">
                                                <div class="sku-price-ratio" v-if="commissionitem.ratio != ''">
                                                    {{commissionitem.ratio}}%
                                                </div>
                                                <div class="sku-price-money" v-else-if="commissionitem.money != ''">
                                                    {{commissionitem.money}}元
                                                </div>
                                                <div class="sku-price-money" v-else>
                                                    --
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF" v-if="dataset.status==1">
            <td style="text-align: left">
                <b>推客分红设置</b>
            </td>
            <td>
                <div class="display-flex">
                    <div>是否参与：</div>
                    <div>{{dataset.tk_status?'参与':'不参与'}}</div>
                </div>
                <div class="display-flex" v-if="dataset.tk_status==1">
                    <div>分红规则：</div>
                    <div>{{dataset.tk_self_rules?'独立规则':'默认规则'}}</div>
                </div>
                <div style="padding: 10px 0;" v-if="dataset.tk_status==1">
                    <div v-if="dataset.tk_self_rules==0" style="overflow: auto;width: 800px">
                        <div class="display-flex goods-header commission-header-container">
                            <div class="commission-store-name">推客身份名称</div>
                            <div class="commission-tk-name">直推比例</div>
                            <div class="commission-tk-name">间推比例</div>
                        </div>
                        <div class="display-flex goods-body-item commission-body-container"
                             v-for="levelItem in tuikeLevelList">
                            <div class="commission-store-name">
                                {{levelItem.name}}
                            </div>
                            <div class="commission-tk-item">
                                {{levelItem.award_zhitui}}%
                            </div>
                            <div class="commission-tk-item">
                                {{levelItem.award_jiantui}}%
                            </div>
                        </div>
                    </div>
                    <div v-if="dataset.tk_self_rules==1" style="overflow: auto;width: 800px">
                        <div class="display-flex commission-header-container">
                            <div class="commission-store-name">推客身份名称</div>
                            <div class="commission-tk-name">
                                直推比例
                            </div>
                            <div class="commission-tk-name">
                                间推比例
                            </div>
                        </div>
                        <div class="alone-setting-container">
                            <div class="display-flex">
                                <div>
                                    <!-- 身份 -->
                                    <div class="commission-store-name" style="height: 50px; line-height: 50px;" v-for="(levelItem,level) in tuikeLevelList">
                                        {{levelItem.name}}
                                    </div>
                                </div>
                                <div>
                                    <div v-for="(commissionitem,index1) in dataset.tk_zhitui_rules">
                                        <div class="display-flex commission-tk-item">
                                            <div class="sku-price-ratio" v-if="commissionitem.ratio != ''">
                                                {{commissionitem.ratio}}%
                                            </div>
                                            <div class="sku-price-money" v-else-if="commissionitem.money != ''">
                                                {{commissionitem.money}}元
                                            </div>
                                            <div class="sku-price-money" v-else>
                                                --
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <div v-for="(commissionitem,index1) in dataset.tk_jiantui_rules">
                                        <div class="display-flex commission-tk-item">
                                            <div class="sku-price-ratio" v-if="commissionitem.ratio != ''">
                                                {{commissionitem.ratio}}%
                                            </div>
                                            <div class="sku-price-money" v-else-if="commissionitem.money != ''">
                                                {{commissionitem.money}}元
                                            </div>
                                            <div class="sku-price-money" v-else>
                                                --
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>

<script>
    var agentgoodslogInfoVm = new Vue({
        el: '#<?php echo $uniqid;?>',
        data: {
            levelList: JSON.parse('<?php echo addslashes($levelList);?>'),
            tuikeLevelList: JSON.parse('<?php echo addslashes($tuikeLevelList);?>'),
            dataset: JSON.parse('<?php echo addslashes($dataset);?>'),
        },
        created(){

        },
        methods: {
            init(){

            }
        }
    });
</script>

<style>
    .agentGoodsLog .goods-image {
        width: 60px;
        height: 60px;
        border-radius: 4px;
        border: 1px solid #e6e6e6;
        margin-right: 14px;
    }
    .agentGoodsLog .shopro-form-group-title {
        border-bottom: 1px solid rgb(230, 230, 230);
        height: 50px;
        line-height: 50px;
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        padding: 0px 20px;
    }
    .agentGoodsLog .commission-header-container {
        line-height: 40px;
    }
    .agentGoodsLog .commission-header-container .commission-store-name, .agentGoodsLog .commission-header-container .commission-item-log, .agentGoodsLog .commission-header-container .commission-tk-name, .agentGoodsLog .commission-header-container .commission-sku, .agentGoodsLog .commission-header-container .commission-price {
        border-top: 1px solid #e6e6e6;
        background: #f9f9f9;
    }
    .agentGoodsLog .commission-store-name {
        width: 120px;
        min-width: 120px;
        padding: 0 10px;
        text-align: center;
        border-left: 1px solid #e6e6e6;
        border-right: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
    }
    .agentGoodsLog .commission-body-container {
        line-height: 50px;
        display: flex;
    }
    .agentGoodsLog .commission-item-log {
        width: 200px;
        min-width: 150px;
        padding: 0 10px;
        display: flex;
        justify-content: center;
        border-right: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
    }
    .agentGoodsLog .commission-tk-name {
        width: 200px;
        min-width: 200px;
        padding: 0 10px;
        text-align: center;
        border-right: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
    }
    .agentGoodsLog .commission-tk-item {
        width: 200px;
        min-width: 150px;
        padding: 0 10px;
        display: flex;
        justify-content: center;
        border-right: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
    }
    .agentGoodsLog .commission-sku, .commission-price {
        width: 60px;
        min-width: 60px;
        padding: 0 20px;
        border-bottom: 1px solid #e6e6e6;
        border-right: 1px solid #e6e6e6;
        text-align: center;
    }
    .agentGoodsLog .sku-price-ratio {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
    }
    .agentGoodsLog .sku-price-ratio {
        margin-right: 10px;
    }
    .agentGoodsLog .sku-price-money {
        width: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
    }
</style>